<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/vue-base.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/vue-index.css" />
		<link rel="stylesheet" type="text/css" href="/static/zTree/css/metroStyle/metroStyle.css"/>
		<style>
			.nav-tabs>li.active>a,
			.nav-tabs>li.active>a:focus,
			.nav-tabs>li.active>a:hover {
				border-top-width: 2px;
				border-top-color: #09c;
				border-bottom: none;
			}
			
			.nav-tabs>li>a {
				padding: 15px;
				border-radius: 0;
				margin-right: 0;
				font-size: 16px;
			}
			
			.nav-tabs>li {
				padding: 0;
				border-bottom: 1px solid #ddd;
			}
			
			.nav-tabs {
				height: 56px;
				border: none;
			}
			
			.nav-tabs>.active {
				border-bottom: none;
			}
			
			.rows {
				margin-left: -15px;
			}
			
			.tab-title {
				width: 20%;
				padding: 0 10px;
			}
			
			.pull-right.page {
				margin-top: 15px;
			}
			
			.title-td {
				max-width: 30%;
			}
			
			.select2-container {
				text-align: left;
			}
			
			td img {
				margin-right: 1px;
				cursor: pointer;
			}
			
			td {
				overflow: hidden;
			}
			
			.modal .col-sm-8 {
				word-break: break-all;
			}
			
			.modal .control-label {
				display: inline;
			}
		</style>
	</head>

	<body>

		<div id="tableContent">
			<!--左侧菜单-->
			<div class="header container-fluid">
				<div class="row">
					<ol class="breadcrumb col-xs-3">
						<li>
							<a>积分商城</a>
						</li>
						<li>积分蛋糕商品列表</li>
					</ol>
					<p class=" col-xs-9 text-right">

						<button type="button" class="btn btn-primary" @click="addCakes">添加蛋糕</button>

					</p>
				</div>
			</div>
			<div class="workframe">
				<div class="container-fluid">
					<div class="row">
						<!--按钮END-->

						<div class="col-md-12">
							<div class="row">
								<!-- 消除外边距 -->
								<div class="col-md-12">
									<input type="hidden" id="hiddenPage" v-model="searchData.currentPage">
									<div class="panel panel-default">
										<div class="panel-heading">积分蛋糕列表</div>
										<ht-table :ajaxurl="ajaxurl" :search-data="searchData" :showindex='true'>
											<!--内部组件-->
											<column slot name="蛋糕编号" align="center" data-key="cake_id" class="title-td"></column>
											<column slot name="蛋糕名称" data-key="cake_name" align="center" class="title-td"></column>
											<column slot name="宣传图片" data-key="picture" align="center"></column>
											<column slot name="兑换积分" align="center" data-key="score_change" class="title-td"></column>
											<column slot name="对外价格" data-key="out_price" align="center"></column>
											<column slot name="对账价格" align="center" data-key="account"></column>
											<column slot name="操作" data-key="id,status,name" align="center" filter="more"></column>
										</ht-table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="/static/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/zTree/js/jquery.ztree.all.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/js/csfwpt.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/js/component.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/*$(document).ready(function() {
										$('#modal').modal({
											show: false, //默认是否展示
											backdrop: false, //隐藏背景
											keyboard: false
										});
										$('#modal').on('hidden.bs.modal', function(params) {
											vueBlock.bean = {
												goodsName: "",
												originalPrice: "",
												businessUrl: "",
												params: "",
												description: "",
												isFixed: "",
												status: "",
												score: "",
												thumbnail: ""
											}
										});

									});*/
			var urlObj = new UrlSearch();
			var vueBlock = new Vue({
				el: "#tableContent",
				//数据部分 
				data: {
					ajaxurl: "integralGoods/goodList",
					searchData: {
						currentPage: 1
					},
					bean: {
						cakeId: "",
						cakeName: "",
						picture: "",
						scoreChange: "",
						outPrice: "",
						account: "",
					}
				},
				//方法
				methods: {
					addCakes: function() {
						window.location.href = "/csfwpt_console/integralCakes/toAddOrUpdate";
					}
				},
				//实时计算
				computed: {},
				//加载后立即执行的方法(created 这个钩子在实例被创建之后被调用)
				created: function() {
					if(urlObj.page) {
						this.searchData.currentPage = urlObj.page;
					}
				}
			});

			var HtmlFun = {
				extend: function(obj) {
					if(obj) {
						HtmlFun = $.extend(HtmlFun, obj);
					}
				},
				toImg: function(v) {},
				more: function(id, status, name) {
					return "<a href=\"javascript:;\" onclick=\"HtmlFun.getDetail(\'" +id +"\')\" class=\"btn btn-link\">查看</a>丨" 
					+"<a href=\"integralGoods/toAddOrUpdate?id=" +id +"&type=edit\"  class=\"btn btn-link\">编辑</a>丨" +
						"<a href=\"javascript:;\" onclick=\"HtmlFun.changeState('" +id +"',\'Y\')\">作废</a>" ;
				},
				ImgDetail: function(val) {
					tool.alert("提示", "<img src=\"" + val +
						"\" style=\"height:auto;width:100%;\"/>");
				},
				getDetail: function(id) {
					var goToDetail = "http://" + tool.getUrlArea() + "/csfwpt_console/integralGoods/toShowDetail?id=" + id + "&page=" + $("#hiddenPage").val();
					window.location.href = goToDetail;
				},
				changeState: function(id, state) {
					var str = "确定要进行" + (state == "Y" ? "上" : "下") + "架操作吗？";
					tool.confirm("提示", str, function() {
						//用户点击确认按钮时操作
						$.ajax({
							type: "POST",
							url: "integralGoods/updateState",
							data: {
								id: id + "",
								state: state
							},
							dataType: "json",
							success: function(data, textStatus, jqXHR) {
								if(data != null && data != "") {
									if(data.success) {
										tool.alert("提示", "操作成功");
										//刷新当前页面.
										window.location.reload();
									} else {
										tool.alert("提示", "操作失败");
									}
								} else {
									tool.alert("提示", "请求服务失败,请重试!");
								}
							},
							error: function(response) {
								tool.alert("提示", "请求服务失败,请重试!");
							}
						});
					});

				}
			}
		</script>
	</body>

</html>